<template>
    <div class="app-contianer">
        <div class="app-content">
            <div class="logo-show"> <img src="@/assets/images/logo1.png" alt=""> </div>
            <div class="section-box">
            <div class="section-top">
                <div class="section-title">注册</div>
                <div class="section-to-logo" @click="toLogin">前往登录</div>
            </div>
            <el-form ref="form" :model="formData" :rules="rules" size="large">
                <el-form-item label="" class="item-input-box" prop="phone">
                    <el-input v-model="formData.phone" placeholder="请输入手机号">
                        <template #prepend>+86</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="" class="item-input-box2" prop="code">
                    <el-input v-model="formData.code" placeholder="请输入验证码">
                        <template #prepend>验证码</template>
                        <template #append> <div :class="['to-get-code', downTime < 60 && 'to-get-code-disabled']" @click="toGetSmsCode">{{downTime < 60 ? `${downTime}秒` : '获取验证码'}}</div> </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="" class="item-input-box" prop="accountName">
                    <el-input v-model="formData.accountName" placeholder="请输入用户名">s
                        <template #prepend>用户名</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="" class="item-input-box" prop="accountPassword">
                    <el-input v-model="formData.accountPassword" type="password" show-password placeholder="请输入密码">
                        <template #prepend>登录密码</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="" class="item-input-box" prop="resetPassword">
                    <el-input v-model="formData.resetPassword" type="password" show-password placeholder="请输入重复密码">
                        <template #prepend>重复密码</template>
                    </el-input>
                </el-form-item>
                <div class="more-info">
                    补充信息（可跳过）
                </div>
                <el-form-item label="" class="item-input-box">
                    <div class="self-form-box">
                        <div class="self-form-label">用户身份</div>
                        <el-select v-model="formData.customerType" placeholder="请选择" class="self-form-select">
                            <el-option :value="item.dictLabel" :label="item.dictLabel" v-for="item in userTypeList" :key="item.dictCode">{{item.dictLabel}}</el-option>
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item label="" class="item-input-box">
                    <el-input v-model="formData.realRemark" placeholder="请输入学校和专业">
                        <template #prepend>{{formData.customerType == '本科在读' || formData.customerType == '专科在读'? '学校和专业': '所在行业'}}</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="" class="item-input-box">
                    <el-input v-model="formData.customerNo" placeholder="请输入您的邀请码">
                        <template #prepend>邀请码</template>
                    </el-input>
                </el-form-item>
            </el-form>
            <el-checkbox v-model="agreeProtocol">已阅读并同意<a href="/cmsContent?title=注册协议">《注册协议》</a></el-checkbox>

            <div class="flex-center register-btn">
                <el-button type="primary" @click="submitForm" style="width: 296px" size="large">立即注册</el-button>
            </div>
        </div>
        </div>

        <div class="bg1"></div>
        <div class="bg2"></div>
        <div class="bg3"></div>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
    import { onMounted, ref } from 'vue'
    import { useRouter } from 'vue-router'
    import { getMemberType } from '@/api/common'
    import { register, sendSms } from '@/api/login'

    const router = useRouter()

    const resetPwdValidate = (rule, value, callback) => {
        if (value !== formData.value.accountPassword) {
            callback(new Error('两次密码输入不一致!'))
        } else {
            callback()
        }
    }

    const form = ref(null)
    const formData = ref({
        phone: '',
        code: '',
        accountName: '',
        accountPassword: '',
        resetPassword: '',
        customerType: '',
        realRemark: '',
        customerNo: '',
    })
    const userTypeList = ref([])
    const rules = ref({
        phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        code: [
            { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        accountName: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        accountPassword: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
        ],
        resetPassword: [
            { required: true, message: '请输入重复密码', trigger: 'blur' },
            { min: 6, message: '密码长度不能小于6位', trigger: 'blur' },
            { validator: resetPwdValidate, trigger: 'blur' }
        ],
    })
    const agreeProtocol = ref(false)
    const downTime = ref(60)

    const getUserType = async () => {
        const res = await getMemberType('source_platform')
        if(res) {
            userTypeList.value = res.data
        }
    }

    const toGetSmsCode = async () => {

        let phoneReg = /^1[3-9]\d{9}$/
        if(!formData.value.phone){
            ElMessage.error('请输入手机号')
            return
        }

        if(!phoneReg.test(formData.value.phone)) {
            ElMessage.error('手机号格式不正确')
            return
        }

        if(downTime.value < 60) {
            return
        }

        const res = await sendSms({ phone: formData.value.phone })
        if(res) {
            console.log(res)
            countDown()
        }
    }

    const countDown = () => {
        if(downTime.value > 0) {
            downTime.value -= 1
            setTimeout(() => {
                countDown()
            }, 1000)
        } else {
            downTime.value = 60
        }
    }

    const submitForm = () => {
        if(!agreeProtocol.value) {
            ElMessage.warning   ('请阅读并同意用户服务协议')
            return
        }

        form.value.validate((valid) => {
            if (valid) {
                console.log('submit', formData.value)
                let parmas = JSON.parse(JSON.stringify(formData.value))
                delete parmas.resetPassword
                register(parmas).then(res => {
                    if(res) {
                        ElMessage.success('注册成功')
                        router.push('/login')
                    }
                })
            } else {
                console.log('error submit')
            }
        }) 
    }

    const toLogin = () => {
        router.push('/login')
    }

    onMounted(() => {
        getUserType()
    })
</script>

<style lang="scss" scoped>
    .app-contianer {
        width: 100vw;
        height: 100vh;
        background-color: #F0F3F7;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .app-content {
        background-color: #fff;
        width: 1280px;
        height: 700px;
        margin: 0 auto;
        padding: 32px 0 0;
        position: relative;
        z-index: 10;
        border-radius: 10px;
        box-shadow: 0px 10px 30px 10px rgba(51, 133, 255, 0.1);
        .logo-show {
            position: absolute;
            top: 32px;
            left: 40px;
            width: 134px;
            height: 46px;
        }
        .section-box {
            width: 585px;
            margin: 0 auto;
        }
        .section-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
            .section-title {
                font-size: 20px;
                font-weight: bold;
                color: #050B20;
            }
            .section-to-logo {
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #666;
                cursor: pointer;
                &::after {
                    content: "";
                    display: block;
                    width: 8px;
                    height: 8px;
                    border: 1px solid rgba(102, 102, 102, 1);
                    border-left-color: transparent;
                    border-bottom-color: transparent;
                    transform: rotate(45deg);
                    margin-left: 2px;
                }
            }
        }
        .more-info {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 20px;
            color: rgba(5, 11, 32, 1);
        }
        .register-btn {
            margin-top: 16px;
            position: relative;
            z-index: 100;
        }
        .to-get-code {
            width: 120px;
            text-align: center;
            color: #fff;
            font-size: 16px;
            font-weight: 500;
            line-height: 40px;
            background: rgb(51, 133, 255);
            border-radius: 0 30px 30px 0;
        }
        .to-get-code-disabled {
            background: #ccc;
            cursor: not-allowed;
        }
    }
    ::v-deep .el-input-group__prepend {
        width: 120px;
        font-size: 16px;
        font-weight: 600;
        color: rgba(5, 11, 32, 1);
        border-radius: 30px 0 0 30px;
    }
    ::v-deep .el-input-group__append {
        border-radius: 0 30px 30px 0;
        // background: rgba(51, 133, 255, 1);
        cursor: pointer;
        padding: 0;
    }
    .item-input-box {
        margin-bottom: 16px;
        &::v-deep .el-input__wrapper {
            border-radius: 0  30px 30px 0;
        } 
    }
    .self-form-box {
        display: flex;
        align-items: center;
        width: 100%;
        .self-form-label {
            width: 120px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            box-shadow: 1px 0 0 0 #dcdfe6 inset, 0 1px 0 0 #dcdfe6 inset, 0 -1px 0 0 #dcdfe6 inset;
            font-size: 16px;
            font-weight: 600;
            color: rgba(5, 11, 32, 1);
            border-radius: 30px 0 0 30px;
            background-color: var(--el-fill-color-light);
        }
        .self-form-select {
            flex: 1;
            &::v-deep .el-select__wrapper {
                border-radius: 0 30px 30px 0;
            }
        }
    }
    
    .bg1 {
        position: fixed;
        bottom: 0;
        left: calc((100vw - 2127px)/2);
        width: 2127px;
        height: 255px;
        background-image: url(@/assets/images/bg1.png);
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 20;
        pointer-events: none;
    }
    .bg2 {
        position: fixed;
        bottom: 0;
        left: -15%;
        width: 150%;
        height: 223px;
        background-image: url(@/assets/images/bg2.png);
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 25;
        pointer-events: none;
    }
    .bg3 {
        position: fixed;
        bottom: 0;
        left: calc((100vw - 2159px)/2);
        width: 2159px;
        height: 334px;
        background-image: url(@/assets/images/bg3.png);
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 5;
        pointer-events: none;
    }
</style>
